<template>
    <div style="boxs">
        <!-- <Header :params="params"/> -->
        <ul>
            <li @click="pushDetail(data)" v-for="(data,index) in list" :key="index">
                <img :src="data.courseImg" alt="">
                <div class="right">
                    <h2>{{data.courseName}}</h2>
                    <p><span v-for="(data,index) in data.classParts" :key="index">{{index+1}}.{{data.partName}}</span></p>
                </div>
                <div class="process">
                    <p>完成度</p>
                    <p>{{getProgress(data)}}%</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
// import Header from '@/components/Header.vue'
export default {
    components:{
        // Header
    },
    created() {
        let id = this.$router.history.current.query.id;
        // setTimeout(() => {
            (async ()=>{
            let {data} = await this.get('/course/queryClassAllots',{courseId:id,userId:localStorage.getItem('id')});
            this.list = data;
        })() 
        // }, 100);
       
    },
    computed: {
        getProgress(){
            return (data)=>{
                return Math.ceil((data.textProgress*1 + data.videoProgress*1) / 2)
            }
        }
    },
    data() {
        return {
            params:{
                left:true,
                title:'课程列表'
            },
            list:[]
        }
    },
    methods: {
        pushDetail(data){
            (async ()=>{
                await this.get('/course/insertIcrobotNearLook',{userId:localStorage.getItem('id'),classId:data.courseId}); 
            })()
            
            this.$router.push({
                path:'/details',
                query:{
                    title:data.courseName,
                    id:data.courseId,
                    textTime:data.textTime,
                    videoTime:data.videoTime,
                    textProgress:data.textProgress,
                    videoProgress:data.videoProgress
                }
                });
        }
    },
}
</script>
<style lang="scss" scoped>
    .boxs{
        width: 100%;
    }
     ul{
        padding: 0 0.2rem;
        box-sizing: border-box;
        li{
            margin-top: 0.2rem;
            width: 100%;
            height: 2.2rem;
            background: #F7F9FA;
            border-radius: 0.15rem;
            padding: 0.22rem;
            box-sizing: border-box;
            display: flex;
            position: relative;
            img{
                width: 3rem;
                height: 1.76rem;
            }
            .right{
                margin-left: 0.25rem;
                width: 3.3rem;
                h2{
                    font-size: 0.26rem;
                    font-family: PingFang SC;
                    // font-weight: 500;
                    color: #282828;
                }
                p{   
                    font-size: 0.2rem;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #A4A4A4;
                    line-height: 0.32rem;
                    margin-top: 0.1rem;
                    overflow: hidden;
                }
            }
            .process{
                position: absolute;
                left: 0;
                top: 0;
                width: 1.2rem;
                height: 0.58rem;
                border-radius: 0.15rem 0 0.15rem 0;
                background: #2A9CFF;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                p{
                    font-size: 0.16rem;
                    color: white;
                    text-align: center;
                }
            }
        }
    } 
</style>